<template>
  <div class="home">
    <div class="home-head">
      <router-link tag="span" to="/home/main">{{ city }}</router-link>
      <router-link tag="span" to="/home/search">
        <van-search placeholder="搜索商品"></van-search>
      </router-link>
    </div>
    <!-- 轮播图 -->
    <div class="main">
      <van-swipe :autoplay="3000" indicator-color="black">
        <van-swipe-item v-for="item in info.banner" :key="item.id">
          <img class="banner-img" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="container">
        <div class="channel">
          <div
            v-for="item in info.channel"
            :key="item.id"
            @click="channelItemClick(item)"
          >
            <img :src="item.icon_url" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="brandList">
          <router-link tag="div" class="heade" to="/home/brand"
            >品牌制造商直供</router-link
          >
          <div class="content">
            <div
              class="brand-item"
              v-for="item in info.brandList"
              :key="item.id"
              @click="brandItemClick(item)"
            >
              <img :src="item.new_pic_url" alt="" />
              <div class="info">
                <p>{{ item.name }}</p>
                <p>{{ item.floor_price }} 元起</p>
              </div>
            </div>
          </div>
        </div>
        <div class="newGoods">
          <div class="head">
            <div class="head-content">
              <p>新品首发</p>
              <router-link tag="p" to="/home/goods?isHot=false"
                >查看全部</router-link
              >
            </div>
          </div>
          <div class="content">
            <ul>
              <li
                v-for="item in info.newGoods"
                :key="item.id"
                @click="goodsItemClick(item)"
              >
                <img :src="item.list_pic_url" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="brief">{{ item.goods_brief }}</p>
                <p class="price">￥{{ item.retail_price }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="newGoods hotGoods">
          <div class="head">
            <div class="head-content">
              <p>人气推荐 · 好物精选</p>
              <router-link tag="p" to="/home/goods?isHot=true"
                >查看全部</router-link
              >
            </div>
          </div>
          <div class="content">
            <ul>
              <li
                v-for="item in info.hotGoods"
                :key="item.id"
                @click="goodsItemClick(item)"
              >
                <img :src="item.list_pic_url" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="brief">{{ item.goods_brief }}</p>
                <p class="price">￥{{ item.retail_price }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="topicList">
          <div class="head">
            <div class="head-content">
              <span>专题精选</span>
              <img src="../../assets/images/right.png" />
            </div>
          </div>
          <div class="content">
            <ul>
              <li
                v-for="item in info.topicList"
                :key="item.id"
                @click="topicItemClick(item)"
              >
                <img :src="item.scene_pic_url" alt="" />

                <div class="title_price">
                  <p class="title">{{ item.title }}</p>
                  <p class="price">{{ item.price_info }}元起</p>
                </div>
                <p class="subtitle">{{ item.subtitle }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="newCategoryList">
          <div
            class="list"
            v-for="category in info.newCategoryList"
            :key="category.id"
            
          >
            <div class="head">
              <p>{{ category.name }}好物</p>
            </div>
            <ul class="content">
              <li
                v-for="item in category.goodsList"
                :key="item.id"
                @click="goodsItemClick(item)"
              >
                <img :src="item.list_pic_url" alt="" />
                <p class="name">{{ item.name }}</p>
                <p class="price">￥{{ item.retail_price }}</p>
              </li>
              <li class="more" @click="channelItemClick(category)">
                <p>{{ category.name }}好物</p>
                <img src="../../assets/images/icon_go_more.png" alt="" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/home/index";
export default {
  name: "Home",
  data() {
    return {
      info: {},
      city: "",
    };
  },
  components: {},
  methods: {
    getIndex() {
      index().then((res) => {
        console.log(res);
        this.info = res.data;
      });
    },
    channelItemClick(item) {
      this.$router.push(`/category/goods?id=${item.id}`);
    },
    brandItemClick(item) {
      this.$router.push(`/home/brand/branddetail?id=${item.id}`);
    },
    topicItemClick(item) {
      this.$router.push(`/topic/topicdetail?id=${item.id}`);
    },
    goodsItemClick(item) {
      this.$router.push(`/goodsdetail?id=${item.id}`);
    },
  },
  created() {
    this.getIndex();
  },
  mounted() {
    var that = this;
    if (this.$store.state.locationAddress.name) {
      this.city = this.$store.state.locationAddress.name;
    } else {
      var that = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log(result);
            that.city = result.city;
          }
        });
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
